<template>
    <div style="min-height:100vh;background: #f5f5f5;position:relative">
        <!-- <p>该功能暂未开放</p> -->
        <img src="@/assets/img/chongzhibg.png" alt="">
        <div style="background: #ffffff;margin-top: 15px">
            <h3>充值金额</h3>
            <ul class="list">
                <li class="chioce" v-for="(item,index) in list" :key="index" @click="choice(index)">{{item}}元</li>
                <li><input type="text" @click="chioceNone" placeholder="请输入金额" v-model="money" @change="tofixed"></li>
            </ul>
        </div>
        <button class="submitButton" @click="onGetPayMethod">立即支付</button>
        <van-popup
        v-model="show"
        show-cancel-button>
            <alert-pay :actual="money" :data="dataList" @close="close" @isPay="isPay" v-if="!shows"></alert-pay>
        </van-popup>
    </div>
</template>

<script>

    import request from "@/request/index.js"
    import alertPay from "@/components/vant/alertPayRecharge.vue"
    export default {
        name: "recharge",
        components: {
            alertPay,
        },
        data() {
            return {
                list:[50,100,200,300,500],
                money:'',
                show: false,
                username: '',
                password: '',
                dataList:[],
            }
        },
        watch:{
        },
        methods:{
            isPay(res){
                // this.show=!this.show;
                this.shows=true;
                this.ispay=res;
            },
            close(){
                this.show = !this.show;
            },
            choice(i){
                var chioce=document.getElementsByClassName('chioce');
                for(var j=0;j<chioce.length;j++){
                    chioce[j].classList.remove('active');
                    if(i==j){
                        chioce[j].classList.add('active');
                        this.money=Number(this.list[i]).toFixed(2);
                    }
                }
            },
            chioceNone(){
               var chioce=document.getElementsByClassName('chioce');
                for(var j=0;j<chioce.length;j++){
                    chioce[j].classList.remove('active');
                }
            },
            tofixed(num){
                this.money=Number(this.money).toFixed(2);
            },
            onGetPayMethod(){
                if(this.money){
                    request.getPayMethod(this);
                    this.show=true;
                }

            },
            none(){
                this.show=!this.show;
            }
        },
        mounted() {
            
        },
    }
</script>

<style scoped lang="scss">
h3{
    font-size: 15px;
    font-weight: 100;
    color: #333333;
    line-height: 3em;
    padding: 0 4vw;
}

.list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 4vw;
    background: #ffffff;
    li{
        width: 30%;
        line-height: 40px;
        border: 1px solid #cecece;
        border-radius: 5px;
        text-align: center;
        color: #333333;
        overflow: hidden;
        font-size: 13px;
        margin-bottom: 15px;
        input{
            width: 100%;
            height: 100%;
            line-height: 1em;
            text-indent: 1em;
        }
    }
    .active{
        background:#FF4C4C;
        color: #ffffff;
    }
}
    .submitButton{
        width: 100vw;
        line-height: 50px;
        background: #FF4C4C;
        color: #ffffff;
        position: fixed;
        bottom: 0px;
    }
</style>
